<template>
  <div class="app">
    <!-- ! v-model 是value封装的语法糖 -->
    <!-- 
         数据变，视图跟着变 :value
         视图变，数据跟着变 :input
    -->
    <input type="text" v-model="msg1" />
    <br /> 
    <!-- ! 如果fn要传参 那么事件对象用 $event -->
    <input type="text" :value="msg2" @input="fn($event,'111')"/>
    <!-- ! $event是在模板中用来接收事件对象的 -->
    <input type="text" :value="msg2" @input="msg2=$event.target.value"/>


    <!-- 复选框绑定 -->
    <!-- v-model 写法 -->
    <input type="checkbox" v-model="flag">

    <!-- 底层写法 -->
    <!-- 数据变，视图跟着变 :checked -->
    <!-- 视图变，数据跟着变 @change -->
    <input type="checkbox" :checked="flag" :change="$event.target.checked">
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg1: '',
      msg2: '',
      flag:true
    }
  },
  methods:{
    fn(e,a){
      // e: 事件对象，如果在事件回调函数中没有传入参数，那么 第一个参数就是事件对象
      // e：如果传入参数，那么e就是传入的数据
      console.log(a)  //11
      
      this.msg2 = e.target.value
    }
  }
}
</script> 
<style>
</style>